<template>
  <div id="app">
    <transition :name="aniType">
        <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
     data: function () {
      return {
        aniType: ""
      }
    },
    watch: {
      $route: function (nv, ov) {
        // self.location.reload();
        var nDeep = nv.path.split("/").length - 1;
        var oDeep = ov.path.split("/").length - 1;
        if (nDeep > oDeep) {
          this.aniType = "pagein";
        } else if (nDeep < oDeep) {
          this.aniType = "pageout";
        } else {
          this.aniType = "";
        }
      }
    },
  }

</script>

<style>

</style>